<template>
	<view class="login">
		<view class="title">
			<view>登入</view>
			<view class="describe">Welcome to ChatAi</view>
		</view>
		
		<view class="loginbox">
			<view class="forms">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
					<el-form-item prop="email" >
						<el-input type="email" v-model="ruleForm.email" placeholder="請輸入您的电子郵箱"></el-input>
					</el-form-item>
					
					<el-form-item prop="login_password">
						<el-input placeholder="請輸入密碼" v-model="ruleForm.login_password" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="submit" @click="submitForm('ruleForm')">登入</el-button>
					</el-form-item>
					<!-- <el-form-item>
					<router-link :underline="false" :to="{ path: '/pages/home'}"><span class="fl link">首页</span></router-link>
					</el-form-item> -->
					<el-form-item>
						<router-link :underline="false" :to="{ path: '/pages/forgotPassword', query: { invite: invite } }"><span class="fl link">忘記密碼</span></router-link>
						<router-link :underline="false" :to="{ path: '/pages/register', query: { invite: invite } }"><span class="fr link">注册</span></router-link>
					</el-form-item>
				</el-form>
			</view>
		</view>
	</view>
</template>

<script>
import regionData from '@/static/json/region.json'
import CryptoJS from 'crypto-js'
import md5 from 'js-md5'
import { setToken } from '@/utils/auth'
	
export default{
	data() {
		return {
			ruleForm: {
				attribution: 66,
				username: '',
				login_password: ''
			},
			regionList: regionData,
			rules: {
				email: [{ required: true, message: '請輸入您的电子郵箱', trigger: 'blur' }],
				login_password: [
					{
						required: true,
						message: '請輸入密碼',
						trigger: 'blur'
					}
				]
			},
			invite: '',
			fbSignInParams: {
				scope: 'email,user_likes',
				return_scopes: true,
				invite: ''
			},
		}
	},
	methods: {
		// get code from cn
		getCode(cn) {
			let code = 66
			regionData.forEach((item) => {
				if (item.en == cn) {
					code = item.code
				}
			})
			return code
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let ruleFormNew = {}
					ruleFormNew = {
						email: this.ruleForm.email,
						login_password: md5(this.ruleForm.login_password).toUpperCase()
					}
					this.$api.login.loginEmail(ruleFormNew).then((res) => {
						if (res.code == '200') {
							let data = JSON.parse(res.data)
							setToken(data.token)
							localStorage.setItem('user', res.data)
							// this.$router.push('/pages/home/index')
							uni.reLaunch({
								url: '/pages/home/index'
							})
						}
					})
					.catch((res) => {})
				} else {
					return false
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
		encrypt(word, key) {
			var keyHex = CryptoJS.enc.Utf8.parse(key)
			var encrypted = CryptoJS.DES.encrypt(word, keyHex, {
				mode: CryptoJS.mode.ECB,
				padding: CryptoJS.pad.Pkcs7
			})
			return encrypted.toString()
		},
	},
	mounted() {
	   
	},
	created() {
	    const query = this.$route.query
	   
	    this.invite = this.fbSignInParams.invite = query.invite ? query.invite : ''
	    this.initClient()
	}
}
</script>

<style lang="scss" scoped>
.login {
	font-family: 'Gilroy';
	position: relative;
	min-height:1400rpx;
	height: 100%;
	background:#000002 url('../static/images/loginBg.png') no-repeat center bottom;
	// background-size: 750rpx 1624rpx;
	.title {
		width: 100%;
		height: 220rpx;
		padding-top:30rpx;
		font: 600 36rpx/36rpx Arial;
		color: #fff;
		text-align: center;
		.describe {
			padding:26rpx;
			font: 700 60rpx/60rpx Arial;
			text-align: center;
		}
	}
	
	.loginbox {
		position: absolute;
		top:180rpx;
		bottom: 0;
		width: 100%;
		// height: calc(100% - 450rpx);
		
		
		padding: 0 60rpx;
		box-sizing: border-box;
		h4 {
			font: 500 56rpx/150rpx Arial;
			text-align: center;
		}
		.login-tabs {
			display: flex;
			width: 100%;
			height: 96rpx;
			border: 1px solid #ccc;
			border-radius: 48rpx;
			margin-bottom: 6rpx;
			.item {
				flex: 1;
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				margin: 6rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #666;
				cursor: pointer;
				&.active {
					color: #8286cf;
					border-radius: 48rpx;
					background-color: #e6e7fc;
				}
			}
		}
		
		.forms {
			margin-top:10rpx;
			
			.link {
				color:rgba(255, 255, 255, 0.6);
				font: 500 24rpx/60rpx Arial;
			}
			.submit {
				width: 100%;
				height: 100rpx !important;
				font-size:32rpx;
				color: #fff;
				border-radius: 5px;
				background:#2446CA !important;
				border:0;
			}
			/deep/ .username {
				position: relative;
				.el-input__inner {
					padding-left: 100rpx;
				}
				.el-input__suffix {
					position: absolute;
					left: 30rpx;
					right: auto;
					line-height: 96rpx;
					color: #999;
				}
			}
		}
	}
}

.facebook {
	margin-top: 1rem;
	text-align: center;
	.fb-signin-button {
		display: inline-block;
		line-height: 3rem;
		color: #777bff;
		// background: url('../static/images/facebook.png') no-repeat 10px 50%;
		background-size: 3rem 3rem;
		border: 1px solid #ccc;
		border-radius: 2rem 2rem 2rem 2rem;
		padding: 0.4rem 1rem 0.4rem 4.5rem;
	}
	.g-signin-button {
		/* This is where you control how the button looks. Be creative! */
		display: inline-block;
		line-height: 3rem;
		margin-top: 1rem;
		padding-left: 4rem;
		color: #777bff;
		// background: url('../static/images/google.png') no-repeat;
		background-size: 2.8rem 2.8rem;
	}
}
.google {
	margin-top: 3rem;
	text-align: center;
	// .google-button {
	// 	display: inline-block;
	// 	line-height: 3rem;
	// 	margin-top: 1rem;
	// 	padding-left: 4rem;
	// 	color: #777bff;
	// 	text-align: center;
	// 	background: url('../static/images/google.png') no-repeat;
	// 	background-size: 2.8rem 2.8rem;
	// }
	.google-button {
		display: inline-block;
		text-align: center;
	}
	#signInDiv {
		iframe {
			margin: 0 !important;
			left: calc(50% - 105px) !important;
		}
	}
}
</style>